<template>
	<div class="wrap">
		<header>
			<ul>
				<li
					v-on:click="
						{
							;(curr = val), (order = index)
						}
					"
					v-bind:class="{ active: curr == val }"
					v-for="(val, index) in navs"
					:key="val"
				>
					<a>{{ val }}</a>
				</li>
			</ul>
		</header>
		<webpage v-show="order == 0"></webpage>
		<Images v-show="order == 1"></Images>
		<Video v-show="order == 2"></Video>
		<Science v-show="order == 3"></Science>
		<Dictionaries v-show="order == 4"></Dictionaries>
	</div>
</template>

<script>
import Webpage from './Webpage'
import Images from './Images'
import Video from './Video'
import Science from './Science'
import Dictionaries from './Dictionaries'
export default {
	components: {
		Dictionaries,
		Science,
		Video,
		Images,
		Webpage,
	},
	data() {
		return {
			navs: ['网页', '图片', '视频', '学术', '词典', '地图'],
			curr: '网页',
			order: 0,
		}
	},
}
</script>

<style lang="scss" scoped>
* {
	margin: 0;
	padding: 0;
}
a {
	text-decoration: none;
}
ul,
li {
	list-style: none;
}
.flex {
	display: flex;
}
.wrap {
	header {
		min-width: 1320px;
		position: relative;
		background: none !important;
		padding: 18px 0 0 0;
		border-bottom: 1px solid #ececec;
		// 导航
		ul {
			overflow: hidden;
			margin: 7px 0 0 160px;
			li {
				float: left;
				font-weight: 400;
				text-transform: uppercase;
				vertical-align: top;
				line-height: 30px;
				padding: 3px 0;
				margin: 0 12px;
				font-size: 11px;
				letter-spacing: initial;
				a {
					padding: 0 8px;
					color: #444;
				}
			}
			.active {
				border-bottom: 3px solid #00809d;
			}
			li:hover {
				border-bottom: 3px solid #ccc;
			}
		}
	}
}
</style>